<template>
  <div class="w750 white-bg" :class="themes.theme">
    <!-- <div class="m-tabs">
      <a href="javascript:;" class="item" :class="{'line-on': !couponType}" @click="checkType()"><span class="txt">全部</span></a>
      <a href="javascript:;" class="item" :class="{'line-on': couponType == 'product'}" @click="checkType('product')"><span class="txt">商品券</span></a>
      <a href="javascript:;" class="item" :class="{'line-on': couponType == 'shop'}" @click="checkType('shop')"><span class="txt">店铺券</span></a>
    </div> -->
    <div class="coupons">
      <div class="coupons-img"><img src="../../../assets/images/coupons-img.jpg" alt=""></div>
      <div class="get-coupons">
        <van-list
          v-model="paging.loading"
          :finished="paging.finished"
          :finished-text="!paging.emptylist?'没有更多了':''"
          @load="onLoadMore"
          :immediate-check="false"
          :error.sync="paging.error"
  				error-text="请求失败，点击重新加载"
          v-if="paging.tab"
        >
          <!-- 优惠券 -->
          <template>
            <div class="list-item" :class="item.status == 1 || item.status == 2 || item.status == 3 ? '' : 'used'" v-for="(item,index) in couponCenterArr" :key="index" @click="couponDet(item.couponId)">
              <div class="left">
                <div class="num">&#65509;<span class="price">{{item.offPrice}}</span></div>
                <span class="condition">满{{item.fullPrice}}元可用</span>
              </div>
              <div class="right">
                <div class="des">
                  <i class="coupon-style" v-if="item.couponType == 'product'">商品</i>
                  <i class="coupon-style" v-else-if="item.couponType == 'shop'">店铺</i>
                  {{item.couponName}}
                </div>
                <div class="han">
                  <span class="use-time">{{ item.startDate | dateformat('YYYY-MM-DD')}}-{{ item.endDate | dateformat('YYYY-MM-DD')}}</span>
                  <template v-if="item.status == 1 || item.status == 2">
                    <button class="get-btn" @click.stop="tapToreceive(index,item.flag,item.couponId)">{{item.flag ? '去使用' : '立即领取' }}</button>
                  </template>
                  <template v-if="item.status == 3">
                    <button class="get-btn" @click.stop="tapToreceive(index,item.flag,item.couponId)">去使用</button>
                  </template>
                  <template v-if="item.status == -1">
                    <button class="get-btn" @click.stop="tapToreceive(index,item.flag,item.couponId)">已过期</button>
                  </template>
                  <template v-if="item.status == 0">
                    <button class="get-btn" @click.stop="tapToreceive(index,item.flag,item.couponId)">已下线</button>
                  </template>
                  <template v-if="item.status == 4">
                    <button class="get-btn" @click.stop="tapToreceive(index,item.flag,item.couponId)">已失效</button>
                  </template>
                  <template v-if="item.status == 5">
                    <button class="get-btn" @click.stop="tapToreceive(index,item.flag,item.couponId)">已抢光</button>
                  </template>
                </div>
                <!-- <div class="det">{{item.shopName ? item.shopName : '平台优惠'}}</div> -->
              </div>
            </div>
          </template>
        </van-list>
      </div>
      <div class="empty" v-if="paging.emptylist && !paging.error">
        <div class="item-img"><img src="../../../assets/images/red-empty.png" alt=""></div>
        <div class="item-txt">暂时没有优惠券</div>
      </div>
    </div>
    <div style="height: 38px;width: 100%;">

    </div>
    <div class="coupon-btn">
      <a href="javascript:;" class="btn-a cur">领券中心</a>
      <a href="javascript:;" class="btn-a" @click="goMyCoupon">我的优惠券</a>
    </div>
  </div>
</template>

<script>
  import { Swipe , SwipeItem  , NavBar , List } from "vant";
  import {mapState} from 'vuex'
  import PageUtil from 'utils/PageUtil';
  import { couponCenter , receive } from "api/coupon";

  const pageUtil = new PageUtil(couponCenter,{field: {
      list: "couponCenterArr"
  }});

  export default {
    components: {
      NavBar
    },
    data() {
      return {
        couponType: null,
        paging: {
          tab:false,
          loading: false,
          finished: false,
          error: false, // 是否错误
				  emptylist: false,// 是否显示列表为空时的样式
        },
        couponCenterArr: []
      };
    },

    watch: {

    },
    mounted() {
      let that = this
      let params = {couponType: this.couponType};
      pageUtil.loadListByPage(that, params, {
        listHandler(resultList) {
          resultList.forEach((item, index) => {
            item.flag = item.status == 3 ? true : false
          })
          return resultList;
        }
      });

    },
    methods: {
      //返回
      goback() {
        this.$router.back();
        this.$router.isBack = true
      },
      
      //改变tab
      checkType(type) {
        this.couponType = type;
        let params = {couponType: this.couponType};
        pageUtil.loadListByPage(this, params);
      },


      //领取
      tapToreceive(index,flag,couponId) {
        if (flag) {
          this.$router.push({
            path: `/searchList`,
            query: {
              // couponDesc: item.couponDesc,
              source: 'coupon',
              couponId: couponId
            }
          });
          return
        }
        this.getCoupon(couponId,index)
      },

      couponDet(couponId) {
        this.$router.push({
          path: `/couponDet`,
          query: {
            couponId: couponId
          }
        });
      },   
      //领取优惠券
      getCoupon(couponId,index) {
        let that = this
        receive({couponId: couponId}).then(res => {
          if (res.status == 1 || res.status == 2 || res.status == 3) {
            that.$toast({duration: 1500, message: res.result ? res.result : res.msg})
            that.couponCenterArr[index].flag = true
          } else {
            that.$toast({duration: 1500, message: res.msg})
          }
          that.couponCenterArr[index].status = res.status
        })
      },
      //去我的优惠券
      goMyCoupon() {
        this.$router.push('/myCoupon')
      },
      //加载更多
      onLoadMore() {
        pageUtil.loadListByPageMore();
      },
    },
    computed: {
      ...mapState(['themes']),
    }
  };
</script>


<style src="../../../assets/css/empty.css" scoped></style>
<style src="../../../assets/css/get-coupons.css" scoped></style>
<style scoped>
  /* 绿色(green) */
  .green .coupon-btn .btn-a.cur {
    color: #4eae31;
  }
  /* end 绿色(green) */

  /* 深红色(crimson) */
  .crimson .coupon-btn .btn-a.cur {
    color: #de0233;
  }
  /* end 深红色(crimson) */

  /* 红色(red) */
  .red .coupon-btn .btn-a.cur {
    color: #e5004f;
  }
  /* end 红色(red) */

  /* 浅红色(pale-red) */
  .pale-red .coupon-btn .btn-a.cur {
    color: #fd8cb0;
  }
  /* end 浅红色(pale-red) */

  /* 橙色(orange) */
  .orange .coupon-btn .btn-a.cur {
    color: #ff6700;
  }
  /* end 橙色(orange) */

  /* 棕色(brown) */
  .brown .coupon-btn .btn-a.cur {
    color: #bc9f5f;
  }
  /* end 棕色(brown) */

  /* 蓝色(blue) */
  .blue .coupon-btn .btn-a.cur {
    color: #2e82e3;
  }
  /* end 蓝色(blue) */

  /* 浅绿(light-green) */
  .light-green .coupon-btn .btn-a.cur {
    color: #5fc221;
  }
  /* end 浅绿(light-green) */

  /* 黑色(black) */
  .black .coupon-btn .btn-a.cur {
    color: #333333;
  }
  .black .coupon-btn .btn-a.cur {
    font-weight: 600;
  }

  .coupons {
    margin: 0;
    padding: 0;
    padding-bottom: 48px;
  }

</style>

